<style>
  .image {
    width: 100%;
    display: block;
  }
</style>
<template>
  <div>
    <mt-header title="年级">
      <mt-button icon="back" slot="left" @click="$router.go(-1)">返回</mt-button>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
    <el-row class="padding-small">
      <el-col :span="8" v-for="(book,index) in books" :key="book.code">
        <el-card :body-style="{ padding: '0px' }" @click.native="selectBook(book)">
          <img :src="book.cover" class="image">
        </el-card>
      </el-col>
    </el-row>

    <el-dialog v-if="selectedBook!=null"
               :title="selectedBook.name" size="full"
               :visible.sync="dialogVisible">

      <el-collapse v-model="activeName">
        <template v-for="chapter in selectedBook.chapters">
          <el-collapse-item :title="chapter.name" :name="chapter.code">
            <template v-for="section in chapter.sections">
              <div>
                <el-button class="width-100 margin-top-small" @click="goExercise(section)">{{missions[section].name}}</el-button>
              </div>
            </template>
          </el-collapse-item>
        </template>
      </el-collapse>

    </el-dialog>
  </div>
</template>

<script>
  import books from '../../db/books';
  import missions from '../../db/missions';

  export default {
    data() {
      return {
        books,
        missions,
        activeName: '',
        selectedBook: null,
        dialogVisible: false,
        missionProcess:{'090101':{code:'090101',status:'learnt'}}
      }
    },
    computed: {},
    methods: {
      selectBook(book) {
        this.selectedBook = book;
        this.dialogVisible = true;
      },
      goExercise(section){
        this.$router.push({path:'/mission-learn',query:{mission:section}})
      }
    },
    mounted() {
    }
  }
</script>
